<template>
	<view class="page" :style="{'height':(h-mt)+'px','padding-top':mt+'px'}">
		<c-nav-bar :title="type+'管理'"></c-nav-bar>
		<view class="box">
			<view class="title">请输入车牌号</view>
			<view class="inputs">
				<car-number-input ref="carNumberInput" @numberInputResult="numberInputResult"></car-number-input>
			</view>
			<view class="default">
				<view class="d_text">是否默认</view>
				<view class="d_right">
					<u-switch v-model="isDefault" activeColor="#007A69" inactiveColor="#EEEEEE" size="46" @change="change"></u-switch>
				</view>
			</view>
			<view class="btns b_add" v-if="!isEdit">
				<view @tap="addLicence">添加</view>
			</view>
			<view class="btns b_edit_del" v-else>
				<view @tap="deleteLicence">删除</view>
				<view @tap="updateLicence">修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				licence:'',
				isDefault:false,
				isEdit:false,
				object:null,
				type:'车牌'
			}
		},
		onLoad(option) {
			if(option.object){
				this.object = JSON.parse(option.object);
				this.licence = this.object.licence;
				this.isDefault = this.object.type==1?true:false;
				this.isEdit = true;
				const valList = this.object.licence.split("");
				const temp = ['','','','','','','',''];
				for (let i in valList) {
					temp[i] = valList[i]
				}
				this.$refs.carNumberInput.inputList = temp;
			}
			if(option.type) this.type = option.type;
		},
		methods: {
			change(e){
				this.isDefault = e;
			},
			numberInputResult(e){
				this.licence = e;
			},
			addLicence(){
				if(!this.$reg.carNo(this.licence)) return this.$showToast('请输入正确的车牌号');
				this.$api.post('/travel/wisdom/BindingNumberplate/xinzeng',{
					"numberplate": this.licence,
					"numberplateColour": 1,
					"type":this.isDefault?1:0,
					"openId": JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res=>{
					if(res.data.code===0){
						this.$showToast('添加成功');
						setTimeout(()=>{
							if(this.type=='车辆') return uni.navigateBack();
							uni.redirectTo({
								url:'/pagesIndex/parkingService/licenceManage'
							})
						},1500)
					}else this.$showModal(res.data.msg);
				})
			},
			deleteLicence(){
				uni.showModal({
					title:'温馨提示',
					content:'是否确认删除？',
					success:res=>{
						if(res.confirm){
							this.$api.del('/travel/wisdom/BindingNumberplate/delete',[this.object.id]).then(res=>{
								if(res.data.code===0){
									this.$showToast('删除成功');
									setTimeout(()=>{
										if(this.type=='车辆') return uni.navigateBack();
										uni.redirectTo({
											url:'/pagesIndex/parkingService/licenceManage'
										})
									},1500)
								}else this.$showModal(res.data.msg);
							})
						}
					}
				})
			},
			updateLicence(){
				this.$api.put('/travel/wisdom/BindingNumberplate/update',{
					"id": this.object.id,
					"numberplate": this.licence,
					"numberplateColour": 1,
					"type":this.isDefault?1:0,
					"openId": JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res=>{
					if(res.data.code===0){
						this.$showToast('修改成功');
						setTimeout(()=>{
							if(this.type=='车辆') return uni.navigateBack();
							uni.redirectTo({
								url:'/pagesIndex/parkingService/licenceManage'
							})
						},1500)
					}else this.$showModal(res.data.msg);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/.car-input-box{
		width: calc(12.5% - 8rpx) !important;
		position: relative;
		&:nth-child(2){
			margin-right: 48rpx;
			&::after{
				content: '';
				width: 6rpx;
				height: 6rpx;
				background: #111111;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				margin-top: -3rpx;
				right: -26.5rpx;
			}
		}
	}
	/deep/.car-input-item{
		background: #FFFFFF;
		border: 2rpx solid #DCDFE5;
	}
	/deep/.car-input-container{
		padding: 0 !important;
	}
	
	.page{
		background: #F5F8FA;
		overflow-y: auto;
		.box{
			width: calc(100% - 48rpx);
			margin: 20rpx 24rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx 24rpx 0;
			box-sizing: border-box;
			.title{
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #111111;
				text-align: center;
			}
			.inputs{
				margin-top: 30rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				padding-top: 40rpx;
				background: #fff;
			}
			.default{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				.d_text{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.d_right{
					width: 89rpx;
					height: 54rpx;
				}
			}
			.btns{
				padding: 40rpx 0;
				&>view{
					height: 88rpx;
					border-radius: 50rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
				&.b_add{
					display: flex;
					align-items: center;
					justify-content: center;
					&>view{
						width: 435rpx;
						background: #007A69;
					}
				}
				&.b_edit_del{
					display: flex;
					align-items: center;
					justify-content: space-between;
					&>view{
						width: calc(50% - 20rpx);
						margin: 0 10rpx;
						background: #007A69;
						&:first-child{
							background: #FEA400;
						}
					}
				}
			}
		}
	}
</style>